<template>
  <div class="p-16 bg-white dark:bg-black-700 min-h-screen">
    <card>
      <div class="h-48 w-48">
        <img
          class="h-48 w-48 rounded-full shadow-md"
          src="https://avatars2.githubusercontent.com/u/11801238?s=460&u=07a60f4b248400448eef07da47e3ace15331e06f&v=4"
          alt=""
        />
      </div>

      <div class="w-92 p-8">
        <p class="max-w-3xl">
          I'm a web developer who loves code and UI design, I like to build something that
          works and looks fine. When i have some problem I try to follow the best
          practices and the modern tools to solve it. I consecrate my free time to help
          people especially on Stack Overflow, maintain some open source components on
          Github or to learn new skills
        </p>
        <button
          class="mt-8 px-8 py-2 bg-gray-800 text-navy-blue-100 shadow-md rounded-full self-end focus:outline-none hover:bg-navy-blue-900"
        >
          <a
            href="https://github.com/boussadjra"
            target="_blank"
            rel="noopener noreferrer"
            >Github</a
          >
        </button>
        <button
          class="ml-2 mt-8 px-8 py-2 bg-yellow-600 text-navy-blue-100 shadow-md rounded-full self-end focus:outline-none hover:bg-navy-blue-900"
        >
          <a
            href="https://stackoverflow.com/users/8172857/boussadjra-brahim"
            target="_blank"
            rel="noopener noreferrer"
            >StackOverflow</a
          >
        </button>
      </div>
    </card>
  </div>
</template>
<script lang="ts">
import Card from "@/components/surface/Card";
import { defineComponent } from "vue";
export default defineComponent({
  components: { Card },
});
</script>
